<template>
  <div>
    <div class="titlescs">{{bulletinData.title}}</div>
    <div class="bulleDatascs" v-html="resHtml"></div>
  </div>
</template>

<script>
import { bulletinData } from "@/api/home";
export default {
  data() {
    return {
      bulletinData: [],
      resHtml: "",
    };
  },
  created() {
    let id = this.$route.query.id;
    this.getbulletinData(id);
  },
  methods: {
    async getbulletinData(id) {
      const res = await bulletinData(id);
      this.bulletinData = res;
      this.resHtml = this.imgTagAddStyle(res.content);
    },
    imgTagAddStyle(htmlstr) {
      // 正则匹配所有img标签
      // var regex0 = new RegExp("(i?)(\<img)([^\>]+\>)","gmi");
      // 正则匹配不含style="" 或 style='' 的img标签
      var regex1 = new RegExp(
        "(i?)(<p)(?!(.*?style=['\"](.*)['\"])[^>]+>)",
        "gmi"
      );
      // 给不含style="" 或 style='' 的img标签加上style=""
      htmlstr = htmlstr.replace(regex1, '$2 style=""$3');
      // 正则匹配含有style的img标签
      // eslint-disable-next-line no-useless-escape
      var regex2 = new RegExp("(i?)(<p.*?style=['\"])([^>]+>)", "gmi");
      // 在img标签的style里面增加css样式(这里增加的样式：display:block;max-width:100%;height:auto;border:5px solid red;)
      htmlstr = htmlstr.replace(
        regex2,
        "$2max-width:100%;margin:20px;line-height: 20px;$3"
      );
      console.log(htmlstr);
      return htmlstr;
    },
  },
};
</script>

<style lang="scss">
.bulleDatascs {
  width: 1200px;
  margin: 0 auto;
  padding: 30px 0;
}
.titlescs {
  text-align: center;
  padding: 30px 0;
  font-size: 30px;
}
</style>